<!DOCTYPE html>
<html lang="en">
<head>
    <title>摇一摇</title>
    <meta name="description" content="摇一摇" />
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-store">
    <meta http-equiv="Cache-Control" content="no-cache,no-store">
    <meta http-equiv="expires" content="0">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jDh3pZvkeqUnuKmWZeyEZSuD0GgpoeSq"></script>
    <link rel="stylesheet" href="./css/modal-px.css" media="screen" title="no_title" charset="utf-8">
    <link rel="stylesheet" href="../common/css/plugins.css" media="screen" title="no_title" charset="utf-8">
    <style media="screen" title="no_title">input{-webkit-appearance: none;}.clear:after{content:'';display:block;clear:both;width:0;height:0}*{margin:0;padding:0;-webkit-tap-highlight-color:rgba(255,255,255,0);font-family:'微软雅黑',"Helvetica Neue",Helvetica,STHeiTi,sans-serif;-webkit-touch-callout:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}a:active,a:hover,a:link,a:visited{text-decoration:none;outline:0}ul,li{list-style:none}html,body{width:100%;font-size:20px;background-color:#fff}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;outline:0}@-webkit-keyframes hand_move{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);-ms-transform:rotate(15deg);-o-transform:rotate(15deg);transform:rotate(15deg)}100%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}}#main{width:100%;min-height:100vh;position:relative;background-color:#fff;padding-bottom:10px}#main header{background-color: #c8242d;background:url(./img/shaking-background-px.jpg) repeat;padding-top:24px;text-align:center}#main header h3{padding:0 10px;font-size:24px;font-weight:600;color:#fff}#main header .rule-bar{position:relative}#main header .rule-bar .rule-btn{display:block;width:100px;height:28px;line-height:28px;border-radius:14px;text-align:center;background:#ffc9cb;color:#e50f07;font-size:16px;margin:6px auto 0;position:relative;z-index:1}#main header .rule-bar .rule-modal{position:absolute;background:#fffce6;border:1px solid #e50f08;border-radius:3px;padding:15px;width:220px;margin-left:-110px;left:50%;top:38px;text-align:left;display:none;z-index:10}#main header .rule-bar .rule-modal.show{display:block}#main header .rule-bar .rule-modal:before{content:'';width:15px;height:10px;display:block;position:absolute;top:-9.8px;left:102.5px;background:url(./img/shaking-uparrow.png) no-repeat center;background-size:contain}#main header .rule-bar .rule-modal .rule-content{font-size:14px;color:#333;line-height:28px}#main header .rule-bar .rule-modal .rule-content h4{font-size:16px;font-weight:400;color:#e50f08}#main header .rule-bar .rule-modal .rule-content p{font-size:14px;color:#333}#main section{margin-top: -1px;background:#c8242d;position:relative}#main section img{width:100%;display:block;vertical-align:middle}#main section .shake-center{width:70%;position:absolute;left:15%;top:15%}#main section .shake-center.hand-animate{-webkit-animation:hand_move infinite 1s}#main footer{background-color:#fff;padding:0 6% 15px;font-size:16px;color:#333;line-height:24px}#main footer h4{font-weight:400;font-size:18px;color:#e50f08;margin-bottom:8px}#main footer .blue_a{display:inline-block;font-weight:400;font-size:16px;color:#00a5e0;margin-top:10px}.model{position:fixed;width:100vw;height:100vh;top:0;left:0;right:0;bottom:0;background:url(./img/back08.png) repeat;z-index:100;display:none}.model .model-content{width:90%;position:absolute;top:50%;left:50%;transform:translate3D(-50%,-50%,0);-webkit-transform:translate3D(-50%,-50%,0)}.model .model-content img{width:100%;display:block;vertical-align:middle}.model .model-content .header{width:100%;position:relative}.model .model-content .header .close{display:block;width:20px;height:20px;line-height:28px;text-align:center;color:#e50f07;font-size:16px;margin:6px auto 0;position:absolute;z-index:1;right:6%;top:55%}.model .model-content .content{background:#fff;border-bottom-left-radius:10px;border-bottom-right-radius:10px;padding:0 20px 20px}.model .model-content .content h2{color:#6e6e6e;font-size:16px;font-weight:400}.model .model-content .content h2 span.prize{color:#f88b39}.model .model-content .content .ops{margin-top:10px;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-ms-box-orient:horizontal;-moz-box-orient:horizontal;-webkit-flex-flow:row nowrap;-ms-flex-flow:row nowrap;-moz-flex-flow:row nowrap;flex-flow:row nowrap;-ms-justify-content:center;-webkit-justify-content:center;justify-content:center;-ms-justify:center;-webkit-justify:center;justify:center;-ms-box-align:center;-webkit-box-align:center;box-align:center;-ms-align-items:center;-webkit-align-items:center;align-items:center}.model .model-content .content .ops img.prizeIcon{display:block;width:120px;height:100px;vertical-align:middle}.model .model-content .content .ops .btns{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-size:0;color:#fff;margin-left:20px}.model .model-content .content .ops .btns .fetch{display:block;width:110px;height:34px;background:url(./img/fetch-btn.png) no-repeat;background-size:100% 100%;margin-bottom:10px}.model .model-content .content .ops .btns .once-more{display:block;width:110px;height:34px;background:url(./img/once-more-btn.png) no-repeat;background-size:100% 100%}.login-modal .close{display:block;width:20px;height:20px;line-height:28px;text-align:center;color:#e50f07;font-size:16px;margin:6px auto 0;position:absolute;z-index:1;top:5px;right:12px}.login-modal input{margin-bottom:10px;background:#f0f0f0;border:0;height:40px;width:80%;margin-left:10%;border-radius:5px;padding:0 5px;box-sizing:border-box;text-indent:10px;font-size:14px}.login-modal .begin-btn{position:absolute;width:120px;height:50px;display:inline-block;top:67%;left:50%;margin-left:-60px;background:url(./img/begin-award.png) no-repeat center;background-size:cover;font-size:0}.fail-modal .tips{text-align:center}.fail-modal .once-more{display:block;margin:10px auto 0;width:110px;height:34px;background:url(./img/once-more-btn.png) no-repeat;background-size:100% 100%;font-size:0;text-indent:-10000px}.hidden{width:0;height:0;display:block;overflow:hidden;opacity:0}.prize-desc{font-size:14px;}
    .login-modal .model-content,.convert-modal .model-content{padding:25px 0 20px;background-color:#fff;border:1px solid #dc363e;border-radius:4px;-webkit-border-radius:4px;}.close-icon{display:block;position:absolute;top:8px;right:10px;width:14px;height:14px;background:url(./img/success-modal-close.png) no-repeat center;background-size:contain;} .login-modal .model-content h3{color:#dc363e;text-align:center;font-size:16px;margin-bottom:20px;}.submit{display:block;font-size:14px;width:72px;height:30px;line-height:30px;text-align:center;color:#fff;background-color:#db4b52;border:none;margin: 0 auto;border-radius:4px;-webkit-border-radius:4px;}.convert-modal .model-content{text-align:center;}.convert-modal .model-content div{font-size:14px;line-height:30px;}#url{width: 60px;height:26px;line-height:26px;margin-top:16px;background-color:#dc363e;color:#fff;display:inline-block;border-radius:4px;}header .times{color: #fff;font-size:.65rem;padding-top:.35rem}header .times i{font-style:normal;color:rgb(244,249,18)}
    #main header .rule-bar .rule-modal{
        max-height: 65vh;
        overflow: scroll;
    }
    </style>
    <link rel="prefetch" href="./js/shaking.mp3"/>
</head>
<body>
<div id="main" style="display:none">
    <header></header>
    <section>
        <img src="./img/shaking-background.jpg"/>
        <div class="shake-center hand-animate">
            <img src="./img/shaking-center.png"/>
        </div>
    </section>
    <footer>
        <h4>奖项说明：</h4>
        <div class="prize-desc"></div>
        <a class="blue_a">查看中奖纪录</a>
    </footer>
    <div id="statement" style="display:none;text-align:center;width:100%;font-size: 12px;background-color:#fff;height:30px;line-height:30px;">所有活动及奖品与苹果公司无关。</div>
    <div style="display:none;width:0;height:0;" id="container"></div>
</div>
<div class="success-modal model" id="success">
    <div class="model-content">
        <div class="header">
            <img src="./img/success-modal-top.png" alt="" />
            <div class="close"><img src="./img/success-modal-close.png"/></div>
        </div>
        <div class="content">
            <h2 class="tips">恭喜您获得了“摇一摇”游戏 <span class="prize" id="name"></span></h2>
            <div class="ops">
                <img class="prizeIcon" src="./img/prize-icon.jpg" alt=""/>
                <div class="btns">
                    <a class="fetch" id="fetch">去领取</a>
                    <span class="once-more">再玩一次</span>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="convert-modal model" id="fail">
    <div class="model-content">
        <i class="close-icon"></i>
        <div class="code">兑换码：<bold id="code">3243721643MN</bold></div>
        <div class="url"><a id="url">去领取</a></div>
    </div>
</div>
<div class="fail-modal model">
    <div class="model-content">
        <div class="header">
            <img src="./img/fail-modal-top.png" alt="" />
            <div class="close"><img src="./img/success-modal-close.png"/></div>
        </div>
        <div class="content">
            <h2 class="tips">很遗憾，您没中奖！</h2>
            <!--<h2 class="tips">您还有<span class="prize">2</span>次机会</h2>-->
            <span class="once-more">再玩一次</span>
        </div>
    </div>
</div>

<div class="login-modal model" id="login">
    <div class="model-content">
        <i class="close-icon"></i>
        <h3>请填入收货信息</h3>
        <input type="text" placeholder="请输入姓名" name="name">
        <input type="text" placeholder="请输入电话号码" name="mobile">
        <input type="text" placeholder="请输入地址" name="address">
        <button class="submit">提交</button>
    </div>
</div>
<div class="hidden">
    <audio src="./js/shaking.mp3" id="playMiu" preload="auto">
        浏览器不支持
    </audio>
</div>
<script type="text/template" id="header-template">
    <h3>{{name}}</h3>
    <div class="rule-bar">
        <div class="rule-btn">活动规则</div>
        <div class="rule-modal">
            <div class="rule-content">
                <h4>活动时间：</h4>
                <p>{{start_at}}至{{end_at}}</p>
                <h4>活动说明：</h4>
                <p>{{#description}}</p>
            </div>
        </div>
    </div>
    <div class="times">你还有<i> 0 </i>次机会！</div>
</script>
<script type="text/javascript">
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // 针对uc横竖屏rem html没有重绘的问题
                var style;
                if (style = document.getElementById("forhtml")) {
                    style.parentNode.removeChild(style);
                }
                style = document.createElement("style");
                style.id = "forhtml";
                document.head.appendChild(style);
                style.appendChild(document.createTextNode("html{font-size:" + 20 * (clientWidth / 320) + "px !important;}"));
            };
        recalc();
        document.body.style.visibility = 'visible';
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].addEventListener('touchstart', function () {
            }, false);
        }
    })(document, window);
</script>
<script type="text/javascript" charset="utf-8" src="../common/lib/zepto.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/lib/zepto-adapter.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/lib/template.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/js/modal.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/js/GeoUtils.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/js/bombBox.js"></script>
<script type="text/javascript" charset="utf-8" src="../common/js/activity.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="../common/js/weixinshare.js"></script>
<script>
    function QRCode(qrcode){
        var $mask = $('<div class="mask-layer">' +
            '             <div class="cover"></div>' +
            '             <div class="content">'+
//            '                 <div class="close icon"></div>' +
            '                 <div class="qr-code"></div>' +
            '                 <div class="slogan">扫描二维码,关注公众号后参与活动</div>' +
            '             </div>' +
            '         </div>');
        $mask.find('.close.icon').click(function(e){
            $mask.remove();
        });
        return {
            open: function(){
                if(qrcode){
                    $mask.find('.qr-code').html('<img src="'+qrcode+'" alt="二维码"/>');
                }
                $('body').append($mask);
            },
            close: function(){
                $mask.remove();
            }
        }
    }
</script>
<script type="text/javascript">
    var isWechat = false,isAPP = false,isFollow = false,isCode=false,isPart=false,activities={};
    var baseUrl = '/lua';
    $(document).ready(function () {
        var prize = {},isInCircle = false;
        var allowed = {},isShow=true;
        window.shake_start = true;//锁定请求
        $("#playMiu")[0].pause();
        $('h4').click(function(e){
            lottery();
        });

        //=========>start of all
        var _act = new Activity();
        var browser = _act.browser();

        if(browser.versions.iPhone){
            $('#statement').show();
        }
        if(_act.params.urlParameter.ways=='wechat') {
            _act.params.isSignPass = 1;
            _act.params.vote_token = _act.params.urlParameter['vote_token'];
        }else{
            _act.interface.mfsign(function(){
                _act.interface.requestAllowed(function (data) {
                    if (data.data.allowed.type == 'no-login') {
                        $('header .times').text('你还没有登录哦!');
                    } else {
                        $('header .times').html('你还有<i> ' + data.data.surplus_times + ' </i>次机会！');
                    }
                });
            });
        }
        _act.interface.requestActInfo('shaking', function (data) {
            $('header').html(template('header-template', data.activity));
            $('body').css({
                'background': 'url(' + data.activity.background_img + ') no-repeat center top',
                'background-size': '100% auto',
            });
            $('#main').show();
            $('header .times').html('你还有<i> ' + data.surplus_times + ' </i>次机会！');
            //===============================
            activities = data.activity;
            isWechat = (_act.params.urlParameter['ways'] == 'wechat');//是否开启微信
            isAPP = (activities.publishing.app.is_open == 'on');//是否开启APP
            isFollow = (_act.params.urlParameter['following'] != 1);//是否关注
            isCode = Boolean(activities.publishing.wechat.qr_code[0]);//是否上传二维码
            if (isWechat) {
                if (isFollow) {
                    isPart = true;
                } else {
                    if (isCode) {
                        var qrCode = QRCode(activities.publishing.wechat.qr_code[0]).open();
                    } else {
                        isPart = true;
                    }
                }
            } else {
                //APP
            }
            //===========================
        });
        _act.interface.requestActPrizes(function (data) {
            var html = '';
            $.each(data, function (i, item) {
                html += '<p>' + item.name + '</p>';
            });
            $('.prize-desc').html(html);
        });
        initShake();

        //初始化摇一摇事件
        function initShake(){
            //摇一摇事件监听
            var SHAKE_THRESHOLD = 1250;
            var last_update = 0;
            var x = y = z = last_x = last_y = last_z = 0;
            var flag = false;
            var number = 0;
            function deviceMotionHandler(eventData){
                var acceleration = eventData.accelerationIncludingGravity;
                var curTime = new Date().getTime();
                if ((curTime - last_update) > 100) {
                    var diffTime = curTime - last_update;
                    last_update = curTime;
                    x = acceleration.x;
                    y = acceleration.y;
                    z = acceleration.z;
                    var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
                    if (speed > SHAKE_THRESHOLD) {
                        if(isShow){
                            $("#playMiu").get(0).play();
                        }
                        if(number > 2){
                            if(window.shake_start&&judge()){
                                lottery();
                            }
                        }
                        number = number + 1;
                    }
                    last_x = x;
                    last_y = y;
                    last_z = z;
                }
            }
            if (window.DeviceMotionEvent) {
                window.addEventListener('devicemotion', deviceMotionHandler, false);
            } else {
                alert('本设备不支持摇一摇');
            }
        }
        //抽奖
        function lottery() {
            if(!isPart){
                if(_act.params.isSignPass == -2){
                    if (activities.publishing.app.app_urls[0]) {
                        $.confirm('请下载APP参与活动?',
                            function () {
                                location.href = activities.publishing.app.app_urls[0];
                            },
                            function () {
                            }
                        );
                    } else {
                        $.alert('请下载APP参与活动');
                    }
                    return;
                }
                if(_act.params.isSignPass == -1) {
                    window.location.href = window.location.href + '&noLogin=true';
                    return;
                }
                if(_act.params.isSignPass == 0){
                    $.alert('非法请求，请在App中打开');
                    return;
                }
            }
            if(_act.params.actInfo.activity.rules.is_spot&&!_act.params.isInCircle){
                $.toast('不在范围内哦~~');
                return;
            }
            if(_act.params.urlParameter.ways!='wechat' && !_act.params.allowed.allowed){
                $.alert(_act.params.allowed.message);
                return;
            }
            window.shake_start = false;
            _act.interface.requestDraw({type:'shaking'},function(data){
                window.shake_start = true;
                $('header .times').html('你还有<i> ' + data.surplus_times + ' </i>次机会！');
                if(!data.is_winning){
                    $('.fail-modal').show();
                }else{
                    window.prize = data.prize;
                    $('#name').html(window.prize.name);
                    $('.success-modal').show();
                }
            },function(data){
                window.shake_start = true;
            },function(data){
                alert(data.message);
                window.shake_start = true;
            });
        }
        //判断是否存在弹出框
        function judge(){
            if($('.success-modal.model').css('display')=='block'){
                return false;
            }
            if($('.fail-modal.model').css('display')=='block'){
                return false;
            }
            if($('.convert-modal.model').css('display')=='block'){
                return false;
            }
            if($('.login-modal.model').css('display')=='block'){
                return false;
            }
            if($('.modal').css('display')=='block'){
                return false;
            }
            return true;
        }

        //跳转-我的奖品
        $('.blue_a').click(function(e){
            e.preventDefault();
            e.stopPropagation();
            if(!_act.params.urlParameter['uid']){
                window.location.href = window.location.href + '&noLogin=true';
            }else{
                location.href = '/act/common/prizes.html'+location.search;
            }
        });
        $('.rule-btn').on('click',function(e){
            $('.rule-modal').toggleClass('show');
        });
        $(document.body).on('click',function(e){
            e.stopPropagation();
            e.preventDefault();
            if(!$(e.target).hasClass('rule-btn')&&!($(e.target).hasClass('rule-modal')||$(e.target).parents('.rule-modal').length>0)){
                $('.rule-modal').removeClass('show');
            }
        });
        $('.convert-modal .model-content .close-icon,.convert-modal .model-content .once-more,.success-modal .model-content .once-more,.success-modal .model-content .close,.login-modal .close-icon').on('click',function(e){
            var $this = $(this);
            $.confirm('确定放弃此次中奖？',
                function () {
                    $this.parents('.model').hide();
                },
                function () {
//                    $this.parents('.model').hide();//取消
                }
            );
        });
        $('.fail-modal .model-content .close,.fail-modal .model-content .once-more').on('click',function(){
            var $this = $(this);
            $this.parents('.model').hide();
        });
        $('.success-modal .model-content #fetch').click(function(e){
            if(_act.params.prize.type_code=='entity'){
                $('.success-modal').hide();
                $('.login-modal').show();
            }else{
                $('.success-modal').hide();
                if(!_act.params.urlParameter['uid']){
                    window.location.href = window.location.href + '&noLogin=true';
                }else{
                    location.href = '/act/common/prizes.html'+location.search;
                }
//                $('#code').html(_act.params.prize.voucher_code);
//                $('#url').attr('href',_act.params.prize.exchange_url);
//                $('.convert-modal').show();
            }
        });
        $('#url').click(function(e){
            e.preventDefault();
            e.stopPropagation();
            location.href = $(this).attr('href');
        });
        $('.login-modal .model-content .submit').click(function(e){
           var name = $.trim($('.login-modal .model-content input[name=name]').val());
           var mobile = $.trim($('.login-modal .model-content input[name=mobile]').val());
           var address =  $.trim($('.login-modal .model-content input[name=address]').val());

           if(!name){
                $.toast('姓名不能为空');
                return;
           }
            if(!mobile){
                $.toast('电话号码不能为空');
                return;
            }
            if(!(/^1[3456789]\d{9}$/.test(mobile))){
                $.toast('填入正确电话号码');
                return;
            }
            if(!address){
                $.toast('地址不能为空');
                return;
            }
            var postdata = {
                uid: _act.params.urlParameter['uid'],
                name: name,
                mobile: mobile,
                address: address,
            };
            window.shake_start = false;
            _act.interface.postUserInfo(postdata, function () {
                return true;
            }, function (data) {
                window.shake_start = true;
                if (data.code == 200) {
                    setTimeout(function () {
                        $('.login-modal').hide();
                    }, 2000);
                }
            }, function (data) {
                window.shake_start = true;
            });
        });
    });
</script>
</body>
</html>